<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>发送直播间消息</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
    <link href="../../resource/lib/imageview/css/imageviewer.css" rel="stylesheet"/>
    <style>

        #edit_form button {
            padding: 4px 12px;
        }

        .hr-line-dashed {
            margin: 15px 0;
        }
    </style>
</head>

<body>
<div class="wrapper wrapper-content  fadeInRight tooltip-demo">
    <form role="form" id="edit_form" th:object="${room}">
        <input type="hidden" id="hdRoomId" th:value="*{id}"/>
        <div class="row">
            <div class="col-lg-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-content" style="border-top: none;">
                        <div class="panel-body form-horizontal">
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">用户昵称:</label>
                                <div class="col-sm-4">
                                    <input id="userNick" type="text" class="form-control input-sm"
                                           placeholder="用户昵称"/>
                                </div>
                            </div>
                            <div class="hr-line-dashed "></div>
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">用户等级:</label>
                                <div class="col-sm-4">
                                    <select class="form-control input-sm" id="sltLevel">
                                        <option value="0">少侠</option>
                                        <option value="1">游侠</option>
                                        <option value="2">大侠</option>
                                        <option value="3">新贵</option>
                                        <option value="4">豪杰</option>
                                        <option value="5">高手</option>
                                        <option value="6">长老</option>
                                        <option value="7">盟主</option>
                                        <option value="8">宗师</option>
                                        <option value="9">归隐</option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed "></div>
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">消息内容:</label>

                                <div class="col-sm-6">
                                    <input type="text" id="message"
                                           class="form-control input-sm " placeholder="发送消息内容"/>
                                </div>
                            </div>

                            <div class="hr-line-dashed "></div>
                            <div class="form-group">
                                <div style="text-align: left;padding-left: 50px">
                                    <button class="btn btn-success btn-submit" type="button"
                                            onclick="liveHandler.send(5)">
                                        发送聊天消息
                                    </button>
                                    <button class="btn btn-success btn-submit" type="button"
                                            onclick="liveHandler.send(6)">
                                        发送关注消息
                                    </button>
                                    <button class="btn btn-success btn-submit" type="button"
                                            onclick="liveHandler.send(8)">
                                        发送分享消息
                                    </button>
                                    <!--                                    <button class="btn btn-success btn-submit" type="button"-->
                                    <!--                                            onclick="liveHandler.send(4)">-->
                                    <!--                                        发送加入消息-->
                                    <!--                                    </button>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js}"></script>
<!--<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>-->

<script type="text/javascript" th:inline="javascript">
    const editUri = /*[[@{/live/sendGeneralMessage/}]]*/  "";
</script>

<script type="text/javascript">
    var index = parent.layer.getFrameIndex(window.name);

    let liveHandler = {
        send: function (type) {
            let roomId = $("#hdRoomId").val();
            let title = $.trim($("#userNick").val());
            let message = $.trim($("#message").val());

            if (title.length === 0) {
                hot.tip.error("请输入昵称");
                return;
            }
            if (type === 5 && message.length === 0) {
                hot.tip.error("请输入发送的消息");
                return;
            }
            if (type === 6) {
                message = "关注了直播间"
            }
            if (type === 8) {
                message = "分享了直播间"
            }
            let requestData = {
                type: type,
                nick: title,
                message: message,
                level: parseInt($("#sltLevel").val()),
                levelName: $("#sltLevel option:selected").text()
            };
            hot.ajax(editUri + roomId, requestData, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    $("#message").val('');
                    hot.tip.success("消息发送成功");

                } else {
                    hot.tip.error("消息发送失败");
                }
            }, function () {
            }, "post", 300);
        }
    }
</script>
</body>

</html>
